<template>
  <view class="payment_box">
    <view class="payment_item" v-for="item in listData" :key="item.orderId">
      <view class="describe_box">
        <text class="money">¥{{ item.totalFee }}</text>
        <text class="state">
          {{
            item.timeState == 0
              ? "待支付"
              : item.timeState == 1
              ? "支付成功"
              : "超时关闭"
          }}</text
        >
      </view>
      <view class="title_box">
        <text class="title"> {{ item.title }}</text>
        <text class="time">支付时间：{{ item.timeEnd }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  listData: {
    type: Array,
  },
});
</script>

<style lang="less" scoped>
.payment_box {
  padding:  30rpx 0;
  .payment_item {
    font-size: 31rpx;
    height: 180rpx;
    background: #fff;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
    margin: 30rpx 0;
    .describe_box,
    .title_box {
        padding: 0 20rpx;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
    }
    .state,
    .time {
      color: @color-grey-text;
    }
  }
}
</style>